<template>
    <div class="wxshare-wrap" :style="{ transform: 'scale('+scale+')'}">
        <div class="banner">
            <div class="people"></div>
            <div class="top-text">
                <div>语桐</div>
                <div>
                    <p>财会副业</p>
                    <span>Finance and Accounting</span>
                </div>
            </div>
            <div class="middle-text">
                <div>财税知识分享</div>
                <div><em>语桐</em>导师</div>
            </div>
        </div>
        <div class="question">
            <div class="tag"><i class="iconfont">&#xe613;</i><span>问</span></div>
            <div class="input" ref="questionEl" contenteditable="true">在此输入问题</div>
        </div>
        <div class="answer">
            <div class="tag"><i class="iconfont">&#xe613;</i><span>答</span></div>
            <div class="input" ref="answerEl" contenteditable="true">在此输入回答</div>
        </div>

        <div class="qrcode-img">
            <div>更多财税知识扫描</div>
            <img :src="qrcodeUrl"/>
        </div>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue'
export default {
    setup () {
        const qrcodeUrl = ref('./imgs/yt.jpg')
        const questionEl = ref(null)
        const answerEl = ref(null)
        const scale = ref(1)

        onMounted(() => {
            questionEl.value.addEventListener('paste', (e) => {
                e.preventDefault()
                const text = e.clipboardData.getData('text/plain')
                questionEl.value.innerHTML = text
            })
            answerEl.value.addEventListener('paste', (e) => {
                e.preventDefault()
                const text = e.clipboardData.getData('text/plain')
                answerEl.value.innerHTML = text
            })
            const winWidth = document.documentElement.clientWidth || window.innerWidth
            if (winWidth < 640) {
                scale.value = winWidth / 640
            }
        })

        return {
            qrcodeUrl,
            questionEl,
            answerEl,
            scale
        }
    }
}
</script>

<style lang="scss">
    @use "./style.scss";
</style>